<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1, user-scalable=no, shrink-to-fit=no" name="viewport">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <title>微聚商城</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            list-style: none;
        }

        @font-face {
            font-family: iconfont;
            font-style: normal;
            font-display: auto;
            src: url(iconfont.woff2) format('woff2');
        }

        :root {
            font-size: 14px;
        }

        *::-webkit-scrollbar {
            display: none;
        }

        body {
            user-select: none;
            width: 100vw;
            overflow-x: hidden;
            background: #1a1d20;
            color: #fff;
        }

        h1, h2, h3, h4, h5, h6 {
            font-weight: 400;
        }

        #categoryList,
        #goodsList li {
            background-color: #212528;
        }

        #categoryTab li,
        h4 {
            text-overflow: ellipsis;
            white-space: nowrap;
            width: 100%;
            overflow: hidden;
        }

        h4 {
            font-size: .9em;
            font-weight: 400;
            text-align: left;
            white-space: nowrap;
            text-overflow: ellipsis;
            color: #fff;
            padding-bottom: 5px;
        }

        a, a:visited {
            text-decoration: none;
            color: inherit;
        }

        header, footer {
            background-color: #212528;
            display: flex;
            align-items: center;
            z-index: 5;
        }

        header {
            width: 96vw;
            padding: 5px 2vw;
        }

        main {
            overflow-y: scroll;
            flex-grow: 1;
        }

        #avatar {
            height: 30px;
            width: 30px;
            border-radius: 100%;
            object-fit: cover;
            overflow: hidden;
            background: url() no-repeat;
            background-size: cover;
        }

        footer {
            justify-content: space-around;
            color: #646b72;
        }

        footer a {
            flex-grow: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 5em;
            padding: 6px 0;
        }

        footer button {
            display: flex;
            width: 40vw;
            height: 100%;
            justify-content: center;
            align-items: center;
            padding: 0;
            border-radius: 0;
            border: 0;
            color: #fff;
        }

        footer a.active {
            color: white;
        }

        footer a::before,
        .collect::before,
        #search-icon {
            font-family: iconfont !important;
            -webkit-font-smoothing: antialiased;
            -webkit-text-stroke-width: .2px;
            font-style: normal;
            font-weight: 400;
        }


        footer a::before {
            display: block;
            content: attr(data-icon);
            font-size: 1.8rem;
        }

        #swiper img {
            width: 100vw;
        }

        main section {
            margin-bottom: 20px;
        }

        #categoryList {
            display: flex;
            flex-wrap: wrap;
            padding: 15px 20px;
        }

        #categoryList img {
            width: 50px;
            height: 50px;
            border-radius: 50%;
        }

        #categoryList li {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            width: 25%;
            line-height: 2.5;
        }

        #categoryTab {
            display: flex;
            margin-top: 5px;
            background-color: #212528;
        }

        #categoryTab li.active {
            border-top-color: #006CBE;
        }

        #categoryTab li {
            border-top: #212528 solid 2px;
            transition: all .5s;
            width: 25%;
            text-align: center;
            padding: 10px 0;
        }

        #goodsList {
            display: grid;
            grid-template-columns: 1fr 1fr;
            column-gap: 4px;
            row-gap: 4px;
            padding: 4px;
        }

        #goodsList li {
            width: 48.5vw;
        }

        #goodsList img {
            width: 48.5vw;
            height: 48.5vw;
            object-fit: cover;
        }


        main::after {
            content: "我是有底线的哦";
            color: #646b72;
            font-size: 1rem;
            text-align: center;
            margin: 1rem 0;
            width: 100vw;
            padding: 0;
            box-sizing: border-box;
        }

        .goodDetail {
            font-size: 1.2em;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            padding: 10px;
        }

        .price::before {
            content: "¥";
            font-size: 0.9em;
        }

        .collect {
            right: 0;
            color: #929496;
        }

        .collect::before {
            content: "\e603";
        }


        .page {
            display: flex;
            flex-direction: column;
            z-index: 7;
            position: absolute;
            top: 0;
            /* left: 0; */
            width: 100vw;
            height: 100vh;
            background: #121416;
            transform: translateX(100vw);
            transition: transform .5s;
            overflow-y: scroll;
            /* overflow-x: hidden; */
        }

        .page.active {
            transform: translateX(0);
        }

        .page.inactive {
            transform: translateX(-100vw);
        }

        #goodPriceSection > * {
            padding: 4vw;
            display: block;
        }
        .detailPage {
            z-index: 9
        }

        .detailPage .swiper {
            display: flex;
            overflow-x: scroll;
            padding: 0;
            scroll-snap-type: x mandatory;
        }

        .detailPage .swiper img {
            width: 100vw;
            height: 100vw;
            object-fit: cover;
            scroll-snap-align: start;
        }

        #detailPrice {
            display: flex;
            justify-content: space-between;
            font-size: 1.2em;
        }

        #goodDetailSection {
            font-size: 1.4rem;
            background: white;
            padding: 2vw;
            color: black;
            overflow-x: hidden;
        }

        #goodDetailSection img {
            max-width: 96vw;
        }

        .categoryPage nav {
            width: 22%;
            height: 100%;
            background: #2c3035;
            text-align: center;
            color: #828282;
        }

        .categoryPage nav li {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 48px;
            font-size: 1.1rem;
            border-bottom: 1px solid #212427;
        }

        .categoryPage nav li.active {
            background-color: #212427;
            color: white;
        }
    </style>
</head>
<body>
<div class="page active" id="mainPage">
    <header>
        <img id="avatar">
        <div id="search">
            <i id="search-icon" style="color: #c2c2c2;font-size: 18px;"></i>
            <div></div>
        </div>
    </header>
    <main>
        <div id="swiper">
            <img src="https://p.qpic.cn/qqjifen_pic/0/upload_0c22048245232f86513311e541ba6e5a/0">
        </div>
        <ul id="categoryList"></ul>
        <ul id="categoryTab">
            <li class="active">人气热销</li>
            <li>新品上市</li>
            <li>好物推荐</li>
            <li>创造营2021</li>
        </ul>
        <ul id="goodsList"></ul>
    </main>
    <footer>
        <a class="active" data-icon="" href="#main">首页</a>
        <a data-icon="" href="#category">分类</a>
        <a data-icon="" href="#cart">购物车</a>
        <a data-icon="" href="#mine">我的</a>
    </footer>
</div>
<template class="page detailPage" id="detailPage">
    <main>
        <div class="swiper">
            <img src="https://p.qpic.cn/qqjifen_pic/0/upload_5317be9f4641a5825cce5576dffd4e60/0">
            <img src="https://p.qpic.cn/qqjifen_pic/0/upload_5317be9f4641a5825cce5576dffd4e60/0">
            <img src="https://p.qpic.cn/qqjifen_pic/0/upload_5317be9f4641a5825cce5576dffd4e60/0">
            <img src="https://p.qpic.cn/qqjifen_pic/0/upload_5317be9f4641a5825cce5576dffd4e60/0">
            <img src="https://p.qpic.cn/qqjifen_pic/0/upload_5317be9f4641a5825cce5576dffd4e60/0">
            <img src="https://p.qpic.cn/qqjifen_pic/0/upload_5317be9f4641a5825cce5576dffd4e60/0">
        </div>
        <section id="goodPriceSection">
            <h2>Paul Frank马克杯—白色款</h2>
            <div id="detailPrice">
                <span class="price">106</span>
                <span class="collect">577 剩余9件</span>
            </div>
            <span>经典的大嘴猴头，经典又时尚</span>
        </section>
        <section id="goodDetailSection">
            <span>商品详情</span>
            <hr>
            <div id="goodDetailContainer">
                <img src="https://p.qpic.cn/qqjifen_pic/0/upload_d726c93a4f825c8dac1be4354cab5887/0"/>
            </div>
        </section>
    </main>
    <footer>
        <a data-icon="" href="#page=cart">购物车</a>
        <button id="detailAddCart" style="background: #35c367">加入购物车</button>
        <button id="detailSubmit" style="background: #ff6347">立即购买</button>
    </footer>
</template>
<template class="page categoryPage" id="categoryPage">
    <nav>
        <ul>
            <li class="ipSelect active" data-id="0" id="ipSelect-0"><p>游戏周边</p></li>
            <li class="ipSelect" data-id="1" id="ipSelect-1"><p>动漫周边</p></li>
            <li class="ipSelect" data-id="2" id="ipSelect-2"><p>影视周边</p></li>
            <li class="ipSelect" data-id="3" id="ipSelect-3"><p>全部周边</p></li>
            <li class="ipSelect" data-id="jifen-virtual" id="ipSelect-4"><p>会员·钻</p></li>
            <li class="ipSelect" data-id="jifen-exchange" id="ipSelect-5"><p>0元兑换</p></li>
        </ul>
    </nav>
</template>
<script>
    const renders = {
        "detail": (page, data) => {
            return page
        },
        "cart": (page, data) => {

        }
    }

    const $ = v => document.querySelector(v);
    document.location.hash = "";

    fetch("cateList.json").then(r => r.json()).then(r => {
        for (const category of r)
            $("#categoryList").innerHTML += `<li onclick="showCategory(this)" data-cid="${category[0]}"><img src="${category[2]}"><p>${category[1]}</p></li>`;
    })

    fetch("goodList.json").then(r => r.json()).then(r => {
        for (const good of r)
            $("#goodsList").innerHTML += `<li onclick="showGood('${good[0]}')"><img loading="lazy" src="https:${good[1]}"><div class="goodDetail"><h4>${good[2]}</h4><span class="price">${good[3]}</span><span class="collect">${good[4]}</span></div></li>`;
    })

    function showPage(pageName, data) {
        let template = $(`template#${pageName}Page`),
            page = document.createElement("div"),
            curr = $(".page.active");
        page.appendChild(document.importNode(template.content, true))
        page = renders[pageName](page, data)
        page["lower"] = curr;
        page.classList = template.classList;
        $("body").appendChild(page);
        data["page"] = pageName
        window.history.pushState(1, "微聚商城", buildParam(data))
        setTimeout(()=>{
            curr.classList.replace("active", "inactive")
            // setTimeout(()=>page.classList.add("active"))
            page.classList.add("active")
        })
        // curr.classList.replace("active", "inactive")
        // // setTimeout(()=>page.classList.add("active"))
        // page.classList.add("active")
        // setTimeout(_ => curr.classList.remove("active"), 1000)
    }

    function buildParam(param) {
        let p = new URLSearchParams();
        for (const key in param)
            p.set(key, param[key])
        return "#" + p.toString()
    }

    function showGood(goodID) {
        showPage("detail", {id: goodID})
    }

    // 更新状态
    window.onpopstate = state => {
        let curr = $(".page.active")
        curr.classList.remove("active");
        curr["lower"].classList.replace("inactive", "active")
        setTimeout(_ => $("body").removeChild(curr), 1000)
    }

    function showCategory(categoryElem) {
        categoryElem.getAttribute("data-cid")
    }
</script>
</body>
</html>